<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../react18/react.development.js"></script>
    <script src="../react18/react-dom.development.js"></script>
    <script src="../react18/babel.min.js"></script>
</head>
<body>
    <div id="app"> </div>
    <script type="text/babel">
        /*
        虚拟DOM中要混入JS表达,要用{}创建js环境,
        {}中只能写变量或者表达式这类有返回值的js,不能写语句
        */
       const title = "JSX"
       const hot = false
       const isActive = true
       const vDOM = (
        <div className="outer">
            <h1>{title}</h1>
            <p>JSX贼方便</p>
            <p className={isActive?"active":""}>今天的天气真{hot?"冷啊":"热啊"}</p>
        </div>
       )

       ReactDOM.createRoot(document.getElementById("app")).render(vDOM)
    </script>
</body>
</html>